<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Burn Calories with Activities</title>
<link rel="stylesheet" type="text/css" href="../css/demo.css" />
<link rel="stylesheet" type="text/css" href="../css/graph.css" />
<link rel="stylesheet" type="text/css" href="../css/activities.css" />

<link
	href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic'
	rel='stylesheet' type='text/css'>

</head>
<body>
	<a href="index.php" class="back_home_button">Back to Home</a>

	<div class="container">
		<!-- Codrops top bar -->
		<div class="codrops-top">


			<div class="clr"></div>
		</div>
		<!--/ Codrops top bar -->
		<header>
			<h1>Burn Calories by doing activities</h1>
			<h2 class="ie-note ie-note-1">Please view this in a modern browser.</h2>
			<h2 class="ie-note ie-note-2">CSS3 Transitions don't work in Internet
				Explorer &lt; 10</h2>
		</header>

		<section class="main">

			<span class="button-label">Activities:</span> <input type="radio"
				name="fill-graph" id="f-none" /><label for="f-none">None</label> <input
				type="radio" name="fill-graph" id="Cycling" checked="checked" /><label
				for="Cycling">Cycling</label> <input type="radio" name="fill-graph"
				id="Running" /><label for="Running">Running</label> <input
				type="radio" name="fill-graph" id="Walking" /><label for="Walking">Walking</label>
			<input type="radio" name="fill-graph" id="Dancing" /><label
				for="Dancing">Dancing</label> <input type="radio" name="fill-graph"
				id="Basketball" /><label for="Basketball">Basketball</label> <input
				type="radio" name="fill-graph" id="Football" /><label for="Football">Football</label>
			<input type="radio" name="fill-graph" id="Badminton" /><label
				for="Badminton">Badminton</label> <input type="radio"
				name="fill-graph" id="Swimming" /><label for="Swimming">Swimming</label>
			<input type="radio" name="fill-graph" id="Tennis" /><label
				for="Tennis">Tennis</label> <input type="radio" name="fill-graph"
				id="Golf_Walking" /><label for="Golf_Walking">Golf(Walking)</label>
			<input type="radio" name="fill-graph" id="Golf_Cart" /><label
				for="Golf_Cart">Golf(Cart)</label> <input type="radio"
				name="fill-graph" id="Skating" /><label for="Skating">Skating</label>
			<input type="radio" name="fill-graph" id="Yoga" /><label for="Yoga">Yoga</label>


			<ul class="graph-container">
				<li><span>30 Mins</span>
					<div class="bar-wrapper">
						<div class="bar-container">
							<div class="bar-background"></div>
							<div class="bar-inner">30 Mins</div>
							<div class="bar-foreground"></div>
						</div>
					</div></li>
				<li><span>60 Mins</span>
					<div class="bar-wrapper">
						<div class="bar-container">
							<div class="bar-background"></div>
							<div class="bar-inner">60 Mins</div>
							<div class="bar-foreground"></div>
						</div>
					</div></li>
				<li><span>90 Mins</span>
					<div class="bar-wrapper">
						<div class="bar-container">
							<div class="bar-background"></div>
							<div class="bar-inner">90 Mins</div>
							<div class="bar-foreground"></div>
						</div>
					</div></li>
				<li><span>120 Mins</span>
					<div class="bar-wrapper">
						<div class="bar-container">
							<div class="bar-background"></div>
							<div class="bar-inner">100</div>
							<div class="bar-foreground"></div>
						</div>
					</div></li>
				<li>
					<ul class="graph-marker-container">
						<li style="bottom: 100%;"><span>2000 Kcal</span></li>
						<li style="bottom: 90%;"><span>1800 Kcal</span></li>
						<li style="bottom: 80%;"><span>1600 Kcal</span></li>
						<li style="bottom: 70%;"><span>1400 Kcal</span></li>
						<li style="bottom: 60%;"><span>1200 Kcal</span></li>
						<li style="bottom: 50%;"><span>1000 Kcal</span></li>
						<li style="bottom: 40%;"><span>800 Kcal</span></li>
						<li style="bottom: 30%;"><span>600 Kcal</span></li>
						<li style="bottom: 20%;"><span>400 Kcal</span></li>
						<li style="bottom: 10%;"><span>200 Kcal</span></li>
					</ul>
				</li>
			</ul>

		</section>

	</div>

</body>
</html>
